<template>
 <div class="player">


    <div id="player">

    </div>


  </div>



</template>

<script>
export default {
  name: "Playervideo",

  data(){
    return {}
  },
    // created 初始化，放置的是ajax等操作/获取数据的代码，不涉及操作页面
  // mounted 初始化，放置的是关于操作页面的初始化js代码
  mounted(){
      // let jwt_token = this.check_login();
      let user_name = localStorage.username || sessionStorage.username;
      let token = localStorage.token || sessionStorage.token;
      // 1. 到数据库中查询用户购买的课程，是否有当前章节
      // 2. 到数据库中查询当前用户购买的课程是否在有效期内
      // 3. 播放页面显示课程章节和课时的播放列表
    	// 4. 通过vid播放不同的课时视频
    	// 以上4个功能自行完成
      // let vid = "fb2e0ac7593f3c3119211f9795fa6a15_f"; // this.$route.params.vid;
      let vid = this.$route.params.vid; // this.$route.params.vid;
      let self = this;
      var player = polyvPlayer({
        wrap: '#player',
        width: document.documentElement.clientWidth-260, // 页面宽度
        height: document.documentElement.clientHeight, // 页面高度
        forceH5: true, // 支持H5标准
        vid: vid,
        code: user_name, // 一般是用户昵称
        // 视频加密播放的配置
        playsafe: function (vid, next) { // 向后端发送请求获取加密的token
            self.$axios.get(`${self.$settings.host}/order/video/`,{
              params:{
                vid: vid,
              },
              headers:{
                "Authorization":"jwt " + token,
              }
            }).then(function (response) {
                // 获取播放视频的token令牌
                next(response.data.token_data);  // 向polyv请求视频数据了
            })
        }
      });
  },
}
</script>

<style scoped>

</style>
